<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<!-- 注意事项:
				1.如果组件名称使用了驼峰规则,则默认的条件下vue渲染数据时都采用小写字母
				hellocomponent.所以导致组件不能匹配.
				2.如果需要使用驼峰规则,则使用 '-'线连接 
				强调: 组件的调用时才能添加'-'
			-->
			<hello-Component></hello-Component>
		</div>
		
		<!-- 模板标签的用法
			1.模板标签不要与Vue div耦合
			2.template标签需要添加id 进行表示
			3.template模板标签中必须有根标签div
		 -->
		 <template id="helloTem">
			 <div>
				 <h1>{{msg}}</h1>
			 </div>
		 </template>
		<script src="../js/vue.js"></script>
		
		<script>
		//1.定义全局组件	参数1：定义组件名称 暂时不要使用驼峰规则
		//				参数2：定义组件对象
		Vue.component('helloComponent',{
			//必须有返回值	返回值是一个对象
			//1.组件数据
			data(){
				return{
					msg:'hello 组件'
				}
			},
			//2.组件结构 html数据
			//''当前行有效
			//``支持多种格式的html
			// template:`<h1>{{msg}}</h1>`
			//3.组件模板优化
			template:'#helloTem'
		})
		/*注意事项:组件的使用必须有vue对象的渲染 */
		const app =new Vue({
			el:"#app"
		})
		
		</script>
	</body>
</html>
